<template>
  <div class="container">
    <el-card>
      <el-form
        ref="topForm"
        :model="form"
        @submit.native.prevent
      >
        <el-row :gutter="10">
          <el-col :span="$getSpan(layout, {xl: 6, lg: 8, md: 8, sm: 12, xs: 24})" class="item-height">
            <el-form-item prop="searchParam">
              <el-input v-model.trim="form.searchParam" clearable placeholder="流水号/付款方账号/PI编号/核销申请人" />
            </el-form-item>
          </el-col>

          <el-col :span="$getSpan(layout, {xl: 6, lg: 8, md: 8, sm: 12, xs: 24})" class="item-height">
            <el-form-item prop="arrivalTime">
              <el-date-picker
                v-model="form.arrivalTime"
                type="daterange"
                start-placeholder="起始到账时间"
                end-placeholder="截止到账时间"
                clearable
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>

          <el-col :span="$getSpan(layout, {xl: 6, lg: 8, md: 8, sm: 12, xs: 24})" class="item-height">
            <el-form-item prop="writeOffTime">
              <el-date-picker
                v-model="form.writeOffTime"
                type="daterange"
                start-placeholder="起始核销时间"
                end-placeholder="截止核销时间"
                clearable
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          </el-col>
        </el-row>

      </el-form>
    </el-card>
    <el-card style="margin-top: 12px;">
      <BaseTable
        ref="writeOffRecordTable"
        :table-data="tableData"
        :table-list="tableList"
        :loading="tableDataLoading"
        :total="total"
        show-index
        show-pagination
        @pagination="handlePagination"
      />
    </el-card>
  </div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import { formatTime, getDictionaryLabel, formatMoneyAmount, formatUserName } from '@/utils/tools'
import { writeOffRecordList } from '@/service/writeOffRecord'
import { mapState, mapActions, mapGetters } from 'vuex'

export default {
  name: 'WriteOffRecord',
  components: {
    BaseTable
  },
  data() {
    return {
      form: {
        searchParam: '',
        arrivalTime: [],
        writeOffTime: []
      },
      tableData: [],
      tableList: [
        {
          label: '收款银行',
          prop: 'receivingBankName'
        },
        {
          label: '收款账号',
          prop: 'receivingBankAccount'
        },
        {
          label: '到账时间',
          prop: 'transactionDate',
          width: '134px',
          render: function(node, data) {
            const { row, column: { prop }} = data
            const text = formatTime(row[prop])
            return <span>{ text }</span>
          }
        },
        {
          label: '到账金额',
          prop: 'transactionAmount',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = row[prop] || row[prop] === 0 ? formatMoneyAmount(row[prop]) : '-'
            return <span>{ text }</span>
          }
        },
        {
          label: '交易币种',
          prop: 'transactionCurrency',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = getDictionaryLabel(row[prop], this.currency)
            return <span>{text}</span>
          }
        },
        {
          label: '流水号',
          prop: 'transactionFlowNo'
        },
        {
          label: '摘要',
          prop: 'summary'
        },
        {
          label: '付款方名称',
          prop: 'payerName',
          width: '200px'
        },
        {
          label: '付款方账号',
          prop: 'payerAccount',
          width: '200px'
        },
        {
          label: '最终金额',
          prop: 'finalAmount',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = row[prop] || row[prop] === 0 ? formatMoneyAmount(row[prop]) : '-'
            return <span>{ text }</span>
          }
        },
        {
          label: '最终币种',
          prop: 'finalCurrency',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = getDictionaryLabel(row[prop], this.currency)
            return <span>{text}</span>
          }
        },
        {
          label: '核销时间',
          prop: 'writeOffTime',
          width: '134px',
          render: function(node, data) {
            const { row, column: { prop }} = data
            const text = formatTime(row[prop])
            return <span>{ text }</span>
          }
        },
        {
          label: '核销申请人',
          prop: 'writeOffInitiatorName',
          width: '160px',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = formatUserName(row[prop])
            return <span>{ text }</span>
          }
        },
        {
          label: '工号',
          prop: 'jobNumber',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = formatUserName(row[prop])
            return <span>{ text }</span>
          }
        },
        {
          label: '部门',
          prop: 'department',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = formatUserName(row[prop])
            return <span>{ text }</span>
          }
        },
        {
          label: '客户名称',
          prop: 'companyName'
        },
        {
          label: 'PI编号',
          prop: 'piNo'
        },
        {
          label: '发货申请单号',
          prop: 'deliveryApplyNo',
          width: '200px'
        },
        {
          label: '回款单号',
          prop: 'paymentPlanOrderNo'
        },
        {
          label: '核销金额',
          prop: 'writeOffAmount',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = row[prop] || row[prop] === 0 ? formatMoneyAmount(row[prop]) : '-'
            return <span>{ text }</span>
          }
        },
        {
          label: '币种',
          prop: 'writeOffCurrency',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = getDictionaryLabel(row[prop], this.currency)
            return <span>{text}</span>
          }
        },
        {
          label: '状态',
          prop: 'status',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const item = this.write_status.find(it => +it.value === row[prop]) || {}
            const text = item.label ? item.label : '-'
            return <span>{ text }</span>
          }
        }
      ],
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      tableDataLoading: false
    }
  },
  computed: {
    ...mapGetters(['layout']),
    ...mapState({
      currency: state => state.base.currency,
      write_status: state => state.base.write_status
    })
  },
  mounted() {
    this.getDictionary()
    this.search()
  },
  methods: {
    ...mapActions({ getBaseDataList: 'base/getBaseDataList' }),
    async requestData() {
      this.tableDataLoading = true
      const { pageIndex, pageSize } = this
      const { searchParam, arrivalTime, writeOffTime } = this.form
      const [transactionDateStart, transactionDateEnd] = arrivalTime || []
      const [writeOfDateStart, writeOfDateEnd] = writeOffTime || []
      const params = {
        pageNum: pageIndex,
        pageSize,
        searchParam,
        transactionDateStart: transactionDateStart || '',
        transactionDateEnd: transactionDateEnd || '',
        writeOfDateStart: writeOfDateStart || '',
        writeOfDateEnd: writeOfDateEnd || ''
      }
      const { records, total } = await writeOffRecordList({ ...params }).finally(() => {
        this.tableDataLoading = false
      })
      this.tableData = records
      this.total = total
    },
    search() {
      this.pageIndex = 1
      this.pageSize = 10
      this.$refs.writeOffRecordTable.pageIndex = 1
      this.$refs.writeOffRecordTable.pageSize = 10
      this.requestData()
    },
    getDictionary() {
      this.getBaseDataList({ type: 'currency' })
      this.getBaseDataList({ type: 'write_status' })
    },
    handlePagination(data) {
      const { pageIndex, pageSize } = data
      this.pageIndex = pageIndex
      this.pageSize = pageSize
      this.requestData()
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  margin: 12px;
  width: calc(100% - 24px);
  .item-height {
    height: 50px;
  }
}
</style>
